/*
 * @Description:登录页面
 * @Autor: lcz
 * @Date: 2022-11-16 14:19:20
 * @LastEditors: lcz
 * @LastEditTime: 2023-10-09 10:23:46
 */
import { Button, Form, Input } from "antd";
import { EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons";
import { connect } from "react-redux";
import { useNavigate } from "react-router-dom";

import { login } from "@/store/Actions";
import styles from "./index.module.scss";
import { LoginProps, LoginContent, formState } from "./interface";

const LoginPage = ({ login }: LoginProps) => {
  const navigator = useNavigate();
  const submitForm = (values: formState) => {
    login({ phone: values.account, ...values, type: 2 }).then(res => {
      if (res.code == 200 && !!res.token && Object.keys(res.data).length > 0) {
        navigator("/home");
      }
    });
  };

  return (
    <div className={styles.main}>
      <div className='onePageFlexCenter'>
        <Form initialValues={{ remember: true }} onFinish={submitForm}>
          <Form.Item name='account' rules={[{ required: true, message: "请输入手机或者邮箱" }]}>
            <Input placeholder='请输入手机或者邮箱' />
          </Form.Item>
          <Form.Item name='password' rules={[{ required: true, message: "请输入密码" }]}>
            <Input.Password
              placeholder='请输入密码'
              iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
            />
          </Form.Item>
          <Form.Item>
            <Button className={styles.loginBtn} htmlType='submit'>
              登陆
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default connect((state: LoginContent) => ({ token: state.token, userInfo: state.userInfo }), {
  login
})(LoginPage);
